<template>
  <div>
    <h1>News的子组件</h1>
    name:{{ name }} price:{{ price }}
  </div>
</template>

<script>
  export default {
    name: "Item",
    data() {
      return {
        name: "",
        price: "",
      };
    },

    mounted() {
      // console.log("News Mounted");
      const { name, price } = this.$route.params;
      this.name = name;
      this.price = price;

      console.log(this.a, this.b, "a,b");
      console.log(this.name, this.price);
    },

    // - 监听动态路由的改变
    //  使用组件内路由更新时守卫(beforeRouteUpdate):
    //  1. 这个守卫有限制,首先组件复用的时候路由的地址是不变,只有动态参数发生变化,这个时候守卫才会触发
    // 2. 守卫中直接获取$route的值,还是旧值,我们需要通过守卫钩子的参数to,拿到最新的$route
    // beforeRouteUpdate(to, from, next) {
    //   console.log("路由更新", this.$route.params);

    //   const { name, price } = to.params;
    //   this.name = name;
    //   this.price = price;

    //   next();
    // },
    beforeRouteUpdate(to, from, next) {
      const { name, price } = to.params;
      this.name = name;
      this.price = price;
    },
  };
</script>

<style></style>
